<!DOCTYPE html>
<html>
  <head>
    <title>Floating UI Tutorial</title>
     <style>
        #tooltip {
  position: absolute;
  top: 0;
  left: 0;
  background: #222;
  color: white;
  font-weight: bold;
  padding: 5px;
  border-radius: 4px;
  font-size: 90%;
  pointer-events: none;
}
    </style>
  </head>
  <body>
    <button id="button" aria-describedby="tooltip">
      My button
    </button>
    <div id="tooltip" role="tooltip">My tooltip</div>
 
    <script type="module">
      import {computePosition} from '@floating-ui/dom';
 
      const button = document.querySelector('#button');
      const tooltip = document.querySelector('#tooltip');
       
      computePosition(button, tooltip).then(({x, y}) => {
        Object.assign(tooltip.style, {
          left: `${x}px`,
          top: `${y}px`,
        });
      });
    </script>
  </body>
</html>